<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="prefetch" href="img/click.wav""/>
		<link rel="prefetch" href="img/media.mp3""/>
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<script src="js/jquery-1.10.1.min.js"></script>
		<script src="js/queryloader2.min.js"></script>

		<style>
			body,
			html {
				height: 100%;
			}
		</style>

	</head>

	<body>
		<div class="hb-container" id="preload">
			<div class="bg"></div>
			<div id="click" class="word">
				门后有什么
				<br />
				<em>？</em>
				<br /> 敲敲看
				<audio id="voice" style="display: none;" src="img/click.wav"></audio>
				<img id="hand" src="img/click.png" style="display: none;" alt="click" />
			</div>
			<img class="hb-bg01" src="img/hb-bg01.png" alt="hb-bg01" />
		</div>
		<!--
        	作者：245848724@qq.com
        	时间：2015-10-22
        	描述：hb-container end
        -->

		<div class="share" style="display: none;" onclick="$('.success-cover').show();"></div>

		<div class="success-cover" style="display:none;" onclick="$('.bad-cover').show();">
			<div class="success-container">
				<div class="bg"></div>
				<div class="rul">
					<em>【活动规则】</em>
					<p>
						领奖时间：2015年10月22日-10月30日 10:00-17:00
						<br /> 咨询电话：028—61898866
						<br /> 领奖地点：华侨城•东岸会所
					</p>
					<ul>
						<li>1、每个手机号只有一次抽奖机会</li>
						<li>2、中奖者凭借本人身份证、手机号、获奖截图领奖，每人限领一次</li>
						<li>3、因不可控因素，主办方有权提前终止本次活动</li>
					</ul>
				</div>
				<p class="content">
					门开了，哇！开心鬼降临！
					<br />
					<em>恭喜你获得欢乐谷日场门票一张</em>
				</p>
				<img class="suc-bg01" src="img/suc-bg01.png" alt="suc-bg01" />
			</div>
		</div>

		<div class="bad-cover" style="display:none;">
			<div class="bad-container">
				<div class="bg"></div>
				<div class="rul">
					<em>【活动规则】</em>
					<p>
						领奖时间：2015年10月22日-10月30日 10:00-17:00
						<br /> 咨询电话：028—61898866
						<br /> 领奖地点：华侨城•东岸会所
					</p>
					<ul>
						<li>1、每个手机号只有一次抽奖机会</li>
						<li>2、中奖者凭借本人身份证、手机号、获奖截图领奖，每人限领一次</li>
						<li>3、因不可控因素，主办方有权提前终止本次活动</li>
					</ul>
				</div>
				<p class="content">
					门开了，门票已经被我抢走了！
					<br />
					<em>很遗憾，还有机会哦</em>
					<br />
					<span>关注华侨城原岸微信号，更多精彩活动等你参加</span>
				</p>
				<img class="suc-bg01" src="img/suc-bg01.png" alt="suc-bg01" />
			</div>
		</div>

		<div class="audioControl play"></div>
		<div style="display: none;">
			<audio id="media" style="display:none;" src="img/media.mp3" loop controls></audio>
		</div>

		<script>
			$("body").queryLoader2({
				barColor: "#efefef",
				backgroundColor: "#111",
				percentage: true,
				barHeight: 1,
				minimumTime: 200,
				fadeOutTime: 1000,
				onComplete: function() {
					$("#preload").show();					
					$("#click").on("click", function() {
						$("#hand").show();
						var dd = document.getElementById("voice");
						setTimeout(function(){dd.play();},400)
						setTimeout(function(){
							$(".share").show();
						},1200);
					});
					
				}
			});
			
			
			$(function(){
				var audio = document.getElementById("media");
				audio.play();
					$(".audioControl").bind("click", function() {
						if ($(this).hasClass("play")) {
							$(this).removeClass("play");
							$(this).addClass("stop");
							audio.pause();
						} else {
							$(this).removeClass("stop");
							$(this).addClass("play");
							audio.play();
						}
					});
			});
		</script>
	</body>

</html>